<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
  import echarts from 'echarts';
  import tdTheme from './theme.json';
  import {on, off} from '@/base/util/tools'

  echarts.registerTheme('tdTheme', tdTheme);
  export default {
    name: 'ChartLine',
    props: {
      max: Number,
      interval: Number,
      time: Array,
      value: Array,
      text: String,
      subtext: String
    },
    data() {
      return {
        dom: null
      };
    },
    methods: {
      resize() {
        this.dom.resize();
      },
      drawbarChart() {
        let fontColor = '#30eee9';
        let option = {
          backgroundColor: '#f4f6f3',
          // padding: [
          //   5,  // 上
          //   10, // 右
          //   5,  // 下
          //   10, // 左
          // ],
          grid: {
            left: '0%',
            right: '2%',
            top: '10%',
            bottom: '0%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              show: true,
              axisLabel: {
                color: fontColor,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#c1d9c8'
                }
              },
              axisTick: {
                show: true
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#c1d9c8'
                }
              },
              data: this.time
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '次/分',
              min: 0,
              max: this.max,
              interval: this.interval,
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#c1d9c8'
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#27b4c2'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#c1d9c8'
                }
              }
            }
          ],
          series: [
            {
              type: 'line',
              symbol: 'none',
              smooth: false,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    color: '#c1d9c8'
                  }
                  // areaStyle: {
                  //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  //     {
                  //       offset: 0,
                  //       color: 'rgba(7,44,90,0.3)'
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: 'rgba(0,146,246,0.9)'
                  //     }
                  //   ])
                  // }
                }
              },
              data: this.value
            }
          ]
        };
        this.dom = echarts.init(this.$refs.dom, 'tdTheme');
        this.dom.setOption(option);
        on(window, 'resize', this.resize);
      }
    },
    watch: {
      value() {
        this.drawbarChart();
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawbarChart();
      });
    },
    beforeDestroy() {
      off(window, 'resize', this.resize);
    }
  };
</script>
